import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
export default {
  created(){
    if(!this.disabledCreated){
      this.initColumnsSetting()
    }
  },
  methods: {
    drag(columns,title='') {
      return {
        header: {
          cell: this.initDrag(columns,title),
        },
      };
    },
    
    
    getColumnsStorageName(title=''){
        return this.$route.name.replace(/ /g,'') +title+ '_columns'
    },
    
    initColumnsSetting(title='',columnsName = 'columns'){
      console.log('列缓存名 :>> ', this.getColumnsStorageName(title));
      let flag = false 
      let columns = JSON.parse(localStorage.getItem(this.getColumnsStorageName(title)) || JSON.stringify(this[columnsName]))
      console.log('columns :>> ', columns);
      columns.forEach((v,idx)=>{
        // 所有表单默认宽度
        if(!v.width || !Number(v.width)){
          v.width = 80
        }
        // 最后一列置空,否则拖拽当前列，其他列也会宽度变化
        if(idx === columns.length-1){
          delete v.width
        }
        // 所有表单居中
        if(v.align !== 'center'){
          v.align = 'center'
        }
        // 检查所有列是否和默认相符
        let item = this[columnsName].find(val=>v.dataIndex === val.dataIndex)
        if(!item){
          flag = true
        }
      })
      if(!flag && this[columnsName].length === columns.length){
        this[columnsName] = columns
      }else{
        this[columnsName] = this[columnsName].map(v=>(v.width = 80,v.align='center',v))
      }
    },
    initDrag(columns,title='') {
      const draggingMap = {};
      columns.forEach((col) => {
        draggingMap[col.key] = col.width;
      });
      const draggingState = Vue.observable(draggingMap);
      return (h, props, children) => {
        let thDom = null;
        const { key, ...restProps } = props;
        let col;
        if (key === "selection-column") {
          //表格加了复选框，不加这个判断col会是undefided
          col = {};
        } else {
          col = columns.find((col) => {
            const k = col.dataIndex || col.key;
            return k === key;
          });
        }
        if (!col || !col.width) {
          return <th {...restProps}>{children}</th>;
        }
        const onDragStart = ()=>{

        }
        const onDrag = (x) => {
          draggingState[key] = 0;
          col.width = Math.max(x, 1);
        };
    
        const onDragstop = () => {
          draggingState[key] = thDom.getBoundingClientRect().width;
          // 缓存
          localStorage.setItem(this.getColumnsStorageName(title),JSON.stringify(columns))
        };
        return (
          <th
            {...restProps}
            v-ant-ref={(r) => (thDom = r)}
            width={col.width}
            class="resize-table-th"
          >
            {children}
            <vue-draggable-resizable
              key={col.key}
              class="table-draggable-handle"
              w={10}
              x={draggingState[key] || col.width}
              z={1}
              axis="x"
              draggable={true}
              resizable={false}
              onDragStart={onDragStart}
              onDragging={onDrag}
              onDragstop={onDragstop}
            ></vue-draggable-resizable>
          </th>
        );
      };
    }
  },
};